<template>
  <div class="g-rowl1">
    <div class="g-topb1">
      <div class="ll">
        <div class="g-titb1">
          <div class="h3">环境信息</div>
        </div>
      </div>
      <div class="rr">
        <router-link to="/" class="g-btnb1">
          <img src="@img/b-i1.png" alt="" class="icn" />
          <span>返回首页</span>
        </router-link>
      </div>
      <img src="@img/b-line1.png" alt="" class="line" />
    </div>
    <div class="content">
      <div class="col-l">
        <div
          class="g-boxl2"
          :style="'background-image: url(' + getImageUrl('warnbgl1.png') + ');'"
        >
          <div class="m-setb1">
            <ul class="ul-listb2">
              <li>
                <div class="con">
                  <div class="icon">
                    <img src="@img/h-i1.png" alt="" />
                  </div>
                  <div class="txt">
                    <div class="info">
                      <div class="t">实时温度</div>
                      <div class="num">36°C</div>
                    </div>
                    <div class="info">
                      <div class="t">标准范围</div>
                      <div class="num">31~39°C</div>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="con">
                  <div class="icon">
                    <img src="@img/h-i2.png" alt="" />
                  </div>
                  <div class="txt">
                    <div class="info">
                      <div class="t">实时湿度</div>
                      <div class="num red">90%</div>
                    </div>
                    <div class="info">
                      <div class="t">标准范围</div>
                      <div class="num">50~70%</div>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="con">
                  <div class="icon">
                    <img src="@img/h-i3.png" alt="" />
                  </div>
                  <div class="txt">
                    <div class="info">
                      <div class="t">实时CO2</div>
                      <div class="num">400</div>
                    </div>
                    <div class="info">
                      <div class="t">标准范围</div>
                      <div class="num">100~500</div>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="con">
                  <div class="icon">
                    <img src="@img/h-i4.png" alt="" />
                  </div>
                  <div class="txt">
                    <div class="info">
                      <div class="t">实时N2</div>
                      <div class="num">75mg/m3</div>
                    </div>
                    <div class="info">
                      <div class="t">标准范围</div>
                      <div class="num">50~100mg/m3</div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <router-link to="/warningInfo" class="setbtn"></router-link>
          </div>
          <div class="m-filb1">
            <div class="g-fillter">
              <div class="checkgp">
                <a-checkbox-group
                  v-model:value="ckvalue"
                  name="checkboxgroup"
                  :options="options"
                  @change="ckchange"
                />
              </div>
              <div class="item">
                <div class="s">选取时间</div>
                <a-range-picker
                  v-model:value="dateValue"
                  :bordered="false"
                  inputReadOnly
                  separator="至"
                />
              </div>
              <div class="opts">
                <div class="btn">
                  <img src="@img/c-btn2.svg" alt="" />
                </div>
                <div class="btn"><img src="@img/c-btn3.svg" alt="" /></div>
              </div>
            </div>
          </div>
          <div class="m-chartl2">
            <pieChart
              :chartid="piedata.chartid"
              :xData="piedata.xData"
              :lineD1="piedata.lineD1"
              :lineD2="piedata.lineD2"
              :lineD3="piedata.lineD3"
              :lineD4="piedata.lineD4"
            ></pieChart>
          </div>
        </div>
      </div>
      <div class="col-r">
        <div
          class="m-handlel"
          :style="'background-image: url(' + getImageUrl('warnbgl2.png') + ');'"
        >
          <div class="m-selectl1 styl2">
            <a-select ref="select" v-model:value="value1" placeholder="请选择">
              <a-select-option value="1">所有养殖场</a-select-option>
              <a-select-option value="2">畜牧养殖场1</a-select-option>
              <a-select-option value="3">畜牧养殖场2</a-select-option>
              <a-select-option value="4">畜牧养殖场3</a-select-option>
            </a-select>
          </div>

          <div class="m-listl1">
            <div class="m-tableb1 jl-table small flex1">
              <a-table
                bordered
                :dataSource="dataSource"
                :columns="columns"
                :pagination="false"
                :row-class-name="
                  (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
                "
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.dataIndex === 'status'">
                   
                    <div class="type" v-if="record.status === '在线'">
                      <span class="btn sty1">在线</span>
                    </div>
                    <div class="type" v-else>
                      <span class="btn sty2">离线</span>
                    </div>
                  </template>
                </template>
              </a-table>
            </div>
            <div class="bot">
              <div class="g-pages">
                <a-pagination
                  v-model:current="current"
                  v-model:page-size="pageSize"
                  :total="85"
                  showQuickJumper
                ></a-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import pieChart from '../components/pieChart.vue';

function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}

const options = [{
  label: 'Apple',
  value: 'Apple',
}, {
  label: 'Pear',
  value: 'Pear',
}, {
  label: 'Orange',
  value: 'Orange',
}];
const ckvalue = ref([]);

function ckchange (param) {
  console.log(param);
}

const dateValue = ref();


const piedata = reactive({
  chartid: "echartsl2",
  xData: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"],

  lineD1: [30, 31, 32, 31, 30, 31, 32, 31, 30, 31, 32, 31, 30, 31, 32, 31, 30, 31, 32, 31, 30, 31, 32, 31],
  lineD2: [24, 24, 24, 24, 25, 25, 26, 25, 25, 24, 23, 24, 24, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25],
  lineD3: [17, 17, 18, 18, 18, 19, 19, 20, 19, 18, 19, 20, 19, 19, 19, 18, 18, 18, 20, 18, 18, 19, 19, 20],
  lineD4: [12, 13, 14, 13, 12, 13, 14, 13, 12, 13, 14, 13, 12, 13, 14, 13, 12, 13, 14, 13, 12, 13, 14, 13],
})
const act = ref("0");
const columns = [
  {
    title: '设备',
    dataIndex: 'name',
    key: 'name',
  }, {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  }
];

const dataSource = ref([
  {
    key: '1',
    name: '1号设备',
    status: '在线',
  },
  {
    key: '2',
    name: '2号设备',
    status: '在线',
  }, {
    key: '3',
    name: '3号设备',
    status: '在线',
  },
  {
    key: '4',
    name: '4号设备',
    status: '离线',
  }, {
    key: '5',
    name: '5号设备',
    status: '离线',
  },
  {
    key: '6',
    name: '6号设备',
    status: '离线',
  }, {
    key: '7',
    name: '7号设备',
    status: '在线',
  },
  {
    key: '8',
    name: '8号设备',
    status: '在线',
  }, {
    key: '9',
    name: '9号设备',
    status: '在线',
  },
  {
    key: '10',
    name: '10号设备',
    status: '在线',
  },
]);


// select
const value1 = ref("1");


// 页码
const current = ref(2);
const pageSize = ref(20);

</script>

<style scoped>
.m-listl1 {
  height: 717px;
}
.m-selectl1 .ant-select {
  display: block;
}
@media screen and (min-width: 1920px) {
  .m-listl1 {
    height: 37.34375vw;
  }
}
</style>
